<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <title>精品出货</title>

    <style>
        body {
            background: #FFFFFF;
        }

        .title {
            margin-top: 2.2rem;
            display: flex;
            border-bottom: 0.5px solid #e6e6e6;
        }

        .title div {
            flex: 1;
            font-size: 0.7rem;
            text-align: center;
            height: 2.25rem;
            line-height: 2.25rem;
            color: #333333;
        }

        .title .active span {
            color: #5f647a;
            padding-bottom: 0.65rem;
            border-bottom: 2px solid #4e536c;
        }

        .list {
            padding-bottom: 2.2rem;
        }

        .list_item {
            position: relative;
            height: 5rem;
            border-bottom: 1px solid #e2e2e2;
        }

        .list_img {
            float: left;
            width: 4rem;
            height: 4rem;
            margin: 0.5rem;
        }

        .list_text {
            /*float: left;*/
            vertical-align: top;
            padding-top: 0.75rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list_text span {
            color: #333333;
            font-size: 0.8rem;
        }

        .list_btn {
            vertical-align: baseline;
            float: right;
            position: absolute;
            bottom: 0.5rem;
            right: 0.5rem;
        }

        .list_btn .minus,
        .list_btn .add {
            display: inline-block;
            width: 1.65rem;
            height: 1.5rem;
            line-height: 1.5rem;
            background: #f2f2f2;
            vertical-align: middle;
            text-align: center;
        }

        .list_btn span {
            display: inline-block;
            width: 1.65rem;
            height: 1.5rem;
            line-height: 1.5rem;
            text-align: center;
            background: #f2f2f2;
            vertical-align: middle;
        }

        .minus {
            color: #cbcbcb;
        }

        .add {
            color: #282828;
        }

        .footer {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 6rem;
            height: 2.2rem;
            line-height: 2.2rem;
            text-align: center;
            background: #5f647a;
        }

        .btn_submit {
            font-size: 1rem;
            font-weight: 300;
            color: #ffc73c;
            background: #5f647a;
        }

        .text {
            display: none;
            width: 10rem;
            height: 2.2rem;
            margin: auto;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            text-align: center;
            line-height: 2.2rem;
            background: #dddddd;
            border: 1px solid #dddddd;
        }

        .center {
            width: 16rem;
            height: 3rem;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            z-index: 99999;
            color: #ddd;
            border: 1px solid;
            border-radius: 5px;
            background: #343434;
            font-size: 0.8rem;
            line-height: 3rem;
        }
    </style>
</head>

<body>

    <!-- 头部  s -->
    <header class="aui-bar aui-bar-nav aui-bar-light" style="background: #4e536c;position:fixed;">
        <a class="aui-pull-left aui-btn" onclick="back()">
            <span class="aui-iconfont aui-icon-left" style="color: #FFFFFF;"></span>
        </a>
        <div class="aui-title" style="color: #FFFFFF;">精品出货</div>
        <a class="aui-pull-right aui-btn" onclick="openNewPage('boutique_list.html')" style="color: #FFFFFF;font-size: 0.65rem;">订货记录</a>
    </header>
    <div class="title">
        <div class="active">
            <span>精品订货</span>
        </div>
        <div>
            <span>确认出货信息</span>
        </div>
    </div>
    <div class="content">
        
        <div class="list">
            <ul class="items">
                <template id="boutique">
                    {{each listBou as value}}
                    <li>
                        <div class="list_item">
                            <div class="list_img">
                                <img alt="" class="img_bg" src="{{value.productIcon}}">
                            </div>
                            <div class="list_text">
                                <span style="display: none" class="boutiqueId">{{value.boutiqueId}}</span>
                                <span class="boutiqueName">{{value.boutiqueName}}</span>
                            </div>
                            <div class="list_btn">
                                <a class="minus" onclick="minus(this)">-</a>
                                <span class="num">0</span>
                                <a class="add" onclick="add(this)">+</a>
                            </div>
                        </div>

                    </li>
                    {{/each}}

                </template>
            </ul>
        </div>
        <div class="footer" onclick="btnClick()">
            <a class="btn_submit">选好了</a>
        </div>
    </div>
    <div class="noList">
        <ul class="items">
            <template id="noBoutique">
                {{each boutiquelist as value}}
                <li>
                    <div class="list_item">
                        <div class="list_img">
                            <img alt="" class="img_bg" src="{{value.productIcon}}">
                        </div>
                        <div class="list_text">
                            <span style="display: none" class="boutiqueId">{{value.boutiqueId}}</span>
                            <span class="boutiqueName">{{value.boutiqueName}}</span>
                        </div>
                        <div class="list_btn">
                            <a class="minus" onclick="minus(this)">-</a>
                            <span class="num">0</span>
                            <a class="add" onclick="add(this)">+</a>
                        </div>
                    </div>
                </li>
                {{/each}}
            </template>
        </ul>
    </div>
    <div class="text">

    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="../js/comment.js"></script>
    <script src="../js/template.js"></script>
    <script src="../js/aui-toast.js"></script>
    <script>
        var obj = JSON.parse(window.localStorage.getItem('obj'));
        // var obj = {
        //     storeId : '10011'
        // }
        window.onload = function () {
            $.ajax({
                type: "GET",
                url: url + "shipmentRule/list/boutique/" + obj.storeId,
                dataType: "JSON",
                success: function (res) {
                    if (res.code == 200) {
                        $('.noList').hide()
                        var html = template('boutique', res.datas);
                        $(".items").append(html);
                    } else {
                        noScheme()
                    }
                }
            });
        }
        //未加盟方案
        function noScheme() {
            $('.list').hide();
            $('.footer').hide()
            $('.noList').show()
            var scheme = {
                boutiquelist: []
            };
            $.ajax({
                type: "GET",
                url: url + "amdin/boutique/boutiqueList",
                success: function (res) {
                    if (res.code == 200) {
                        var data = res.datas.boutiquelist
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].boutiqueFlag === 2) {
                                scheme.boutiquelist.push(data[i])
                            }
                        }
                        var html = template('noBoutique', scheme);
                        $(".items").append(html)
                    }
                }
            })
        }
        // // 数量增加
        function add(e) {
            event.preventDefault();
            event.stopPropagation();
            if (obj.storeFlag =='no') {
                $('.text').html("门店未加盟方案！").show().fadeOut(3000)
               
            } else {
                var num = $(e).prev().html();
                num++;
                $(e).prev().html(num);
            }

        }
        // // 数量减少
        function minus(e) {
            event.preventDefault();
            event.stopPropagation();
            var num = $(e).next().html();
            num--;
            if (num < 0) {
                return
            } else {
                $(e).next().html(num)
            }
        }

        $('.items').on("click", 'li', function () {
            var arr = $('.list_text .boutiqueId');
            for (var i = 0; i < arr.length; i++) {
                var element = arr[i].innerHTML;
                if ($(this).find('.boutiqueId').html() == element) {
                    window.location.href = "goods_details.html?" + element;
                }
            }
        })
        function btnClick(){
            
            var boutiqueIdArr = $('.list_text ').find('.boutiqueId');
            var boutiqueNameArr = $('.list_btn ').find('.num');
            var numObj = {
                "storeId": obj.storeId,
                "listCart": []
            }
            for (var i = 0; i < boutiqueIdArr.length; i++) {
                for (var j = 0; j < boutiqueNameArr.length; j++) {
                    if (i == j) {
                        if (boutiqueNameArr[j].innerHTML != 0) {
                            numObj.listCart.push({
                                "bouId": boutiqueIdArr[i].innerHTML,
                                "quantity": boutiqueNameArr[j].innerHTML
                            })
                        }
                    }
                    var num = '';
                    num += boutiqueNameArr[j].innerHTML;
                }
            }
            $.ajax({
                type: 'post',
                url: url + 'shipment/order/save/cart',
                data: JSON.stringify(numObj),
                contentType: 'application/json',
                success: function (res) {
                    if (res.code == 200) {
                        openNewPage('affirm_msg.html');
                    } else if (res.code == 400) {
                        $('.text').html(res.msg).fadeIn(2000).fadeOut(3000);
                    }
                }
            })
        }
        // // 跳转新页面
        function openNewPage(url) {
            if (isAndroid()) {
                window.WebViewJavascriptBridge.callHandler(
                    'openNewPage', {
                        'param': url
                    },
                    function (responseData) { }
                );
            } else if (isIOS()) {
                window.location.href = url
            } else {
                window.location.href = url
            }
        }
    </script>
</body>

</html>